<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>绑定样式</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
		<style>
			.basic {
				width: 400px;
				height: 100px;
				border: 1px solid black;
			}

			.happy {
				border: 4px solid red;
				background-color: rgba(255, 255, 0, 0.644);
				background: linear-gradient(30deg, yellow, pink, orange, yellow);
			}

			.sad {
				border: 4px dashed rgb(2, 197, 2);
				background-color: gray;
			}

			.normal {
				background-color: skyblue;
			}

			.atguigu1 {
				background-color: yellowgreen;
			}

			.atguigu2 {
				font-size: 30px;
				text-shadow: 2px 2px 10px red;
			}

			.atguigu3 {
				border-radius: 20px;
			}
		</style>
	</head>
	<!-- 
	 绑定样式:
	 1.class样式
		 写法:class="xxx"xxx可以是字符串、对象、数组。
		 字符串写法适用于:类名不确定，要动态获取。
		 对象写法适用于:要绑定多个样式，个数不确定，名字也不确定。
		 数组写法适用于:要绑定多个样式，个数确定，名字也确定，但不确定用不用。
	 2.style样式
		 :style="{fontSize:xxx}"其中xxx是动态值。
		 :style="[a,b]"其中a、b是样式对象。参考下面代码。
	 -->
	<body>
		<div id="root">
			<!-- 绑定class样式--字符串写法。适用于:样式的类名不确定，需要动态指定  -->
			<!-- 如果不使用冒号,只能写一个class，后面写的class不起作用。 -->
			<!-- 加了冒号后，vue会介入，将happy当做表达式使用。最终会把2个class汇总 -->
			<div class="basic" :class="mood" @click="changeMood">{{name}}</div><br /><br />
			<!--绑定class样式--数组写法，适用于:要绑定的样式个数不确定、名字也不确定-->
			<div class="basic" :class="classArr">{{name}}</div>
			<!-- 也可以直接这样写，这样写无法修改变量值了 -->
			<div class="basic" :class="['atguigu1','atguigu2','atguigu3']">{{name}}</div><br />
			<!-- 如果这样写呢？如果不加引号，里面的元素就是一个变量，它就会去data里面找变量atguigu1，
			那就需要在data里面配置atguigu1。
			<div class="basic" :class="[atguigu1,atguigu2,atguigu3]">{{name}}</div>
			-->
			<!-- 绑定class样式--对象写法，适用于:要绑定的样式个数确定、名字也确定，但要动态决定用不用-->
			<div class="basic" :class="classObj">{{name}}</div>

			<!-- 绑定style样式--对象写法 -->
			<div class="basic" :style="style0bj">{{name}}</div> <br /><br />
			<!-- 绑定style样式--数组写法 -->
			<div class="basic" :style="styleArr">{{name}}</div>
		</div>
	</body>
	<script type="text/javascript">
		Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
		const vm = new Vue({
			el: '#root',
			data: {
				name: '尚硅谷',
				mood: 'normal',
				classArr: ['atguigu1', 'atguigu2', 'atguigu3'],
				classObj: {
					atguigu1: true,
					atguigu2: true
				},
				//以下都是样式对象，注意样式对象中的key不能随便写。
				style0bj: {
					fontSize: '40px',
					color: 'red',
					backgroundColdr: 'orange'
				},
				style0bj2: {
					backgroundColor: 'orange'
				},
				styleArr: [{
					fontSize: '40px',
					color: 'red',
				}, {
					backgroundColor: 'orange',
				}]
			},
			methods: {
				changeMood() {
					//this.mood = 'happy'
					//生成的随机数包含0，不含1。floor向下取整。
					//arr.shift 移除第一个元素
					//arr.push 添加一个元素
					const arr = ['happy', 'sad', 'normal']
					const index = Math.floor(Math.random(0, 1) * 3)
					this.mood = arr[index]
				}
			}
		})
	</script>
</html>